<template lang="html">

      <div id="success">
      		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_471451_lyw5wa8iz3434n29.css"/>
      	
      	<div style="display: flex;justify-content: space-around;align-items: center;"  class="car my">
      	
      	<div @click="back" id="fanhui">
      		<img style="width:.25rem;height:.25rem;" src="../../static/img/houtui.png" />
      	</div>
      	
      	<div  id="">
      	  我的寺库
      	</div>
      	<div @click="delete1"  class="iconfont icon-weibiaoti1"></div>
      	  <!--<el-button :plain="true" @click="delete1">打开消息提示</el-button>-->
      	
      </div>
      
      <div class="car_div">
      	<ul>
      		<li><p></p><span> 账户</span> <img src="../../static/img/1-4.png"/> </li>
      		<li><p></p><span>订单</span><img src="../../static/img/1-4.png"/></li>
      		<li><p></p><span>红包，优惠券</span><img src="../../static/img/1-4.png"/></li>
      	</ul>
      	
      </div>
      
      <div class="car_div1" style="margin-top: -.2rem;">
      	<ul>
      		<li>
      			<p></p><span>我的竞拍</span> <img src="../../static/img/1-4.png"/> </li>
      		<li><p></p><span>我的拍卖劵</span><img src="../../static/img/1-4.png"/></li>
      	</ul>
      	
      </div>
      
      <div class="car_div2" style="margin-top: -1rem;">
      	<ul>
      		<li><p></p><span> 关于寺库</span> <img src="../../static/img/1-4.png"/> </li>
      		<li><p></p><span>客服热线</span><img src="../../static/img/1-4.png"/></li>
      		<li><p></p><span>海外站购买说明</span><img src="../../static/img/1-4.png"/></li>
      	</ul>
      	
      </div>
      	<div id="successBottom">
      		<dl>
      			<dt @click="shouye"><span class="iconfont icon-shouye"></span></dt>
      			<dd>首页</dd>
      		</dl>
      		<dl>
      			<dt @click="pinpai"><span  class="iconfont icon-pinpai"></span></dt>
      			<dd>品牌</dd>
      		</dl>
      		<dl>
      			<dt @click="gouwudai"><span  class="iconfont icon-gouwudai"></span></dt>
      			<dd>购物袋</dd>
      		</dl>
      		<dl>
      			<dt @click="wode"><span  class="iconfont icon-wode"></span></dt>
      			<dd>我的寺库</dd>
      		</dl>
      		
      	</div>
     
      	
      </div>
</template>

<script>
import Bus from '../route/bus'; 
export default {
	data(){
		return {
//			xianshi:false
     del:false
		}
	},
	methods:{
		back(){
		location.replace('/first')
		},
		delete1(){
			this.$confirm('此操作将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
//        this.$message({
////          type: 'success',
////          message: '退出成功!'
//        });
          location.replace('/first#/my')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
			this.del=false;
			Bus.$emit('del', this.del); 
			deleteCookie('user')
			deleteCookie('passer')
		},
		shouye(){
			location.replace('/first#/first')
		},
		pinpai(){
			location.replace('/jian#/jian')
		},
		gouwudai(){
			location.replace('/car#/car')
		},
		wode(){
			location.replace('/my#/my')
		}
},
wtach:{
	$route(){
		console.log('5555')
	}
	
}
}
</script>

<style lang="css">
	/*确定登录状态的*/
	.el-message-box__wrapper>div{
		width: 100%;
	}
	#success{
	}
	#successBottom{
		width: 100%;
		position: fixed;
		bottom:2.3rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#successBottom dl{
		display: block;
		width: 30%;
		height:1.5rem;
		text-align: center;
		border: 1px solid darkgray;
	}
	#successBottom dl dt{
		margin: .5rem auto;
	}
	#successBottom dl span{
		font-size: 1rem;
	}
	.car_div,.car_div1,.car_div2{
		width: 100%;
		height:2.5rem
	}
	.car_div ul,.car_div1 ul,.car_div2 ul{
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		/*justify-content: space-around;*/
		align-items: center;
	}
	.car_div ul,.car_div1 ul,.car_div2 ul{
		margin-top: .1rem;
	}
	.car_div ul li,.car_div1 ul li,.car_div2 ul li{
		position: relative;
			width: 100%;
		height: 25%;
		list-style: none;
		background-color: white;
		border-bottom: 1px solid lightgray;
		
	}
	.car_div ul li span,.car_div1 ul li span,.car_div2 ul li span{
		position: absolute;
		width: 35%;
		height: 100%;
		/*display: block;*/
		left: 1rem;
		top: .15rem;
	}
	.car_div ul li img,.car_div1 ul li img,.car_div2 ul li img{
		position: absolute;
		right: .2rem;
		top: .1rem;
	}
	.car_div1 ul li:nth-child(1)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-5.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div1 ul li:nth-child(2)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-6.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div2 ul li:nth-child(1)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-7.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div2 ul li:nth-child(2)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-8.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div2 ul li:nth-child(3)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-9.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div ul li:nth-child(1)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-1.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div ul li:nth-child(2)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-2.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	.car_div ul li:nth-child(3)>p{
		width: 25%;
		height:100% ;
		margin-left: .2rem;
		/*margin-top: .2rem;*/
		background-image: url(../../static/img/1-3.png);
		background-repeat: no-repeat ;
		background-size: 40% 90%;
	}
	/*.car_div ul li:nth-child(2)>p{
		
	}*/
	
</style>
